/* 导入设计系统 */
@import './design-system.css';

/* 兼容性变量映射 */
:root {
  /* 主色调 */
  --primary-color: var(--color-primary);
  --primary-color-dark: var(--color-primary-hover);
  --primary-color-light: var(--color-primary-light);
  
  /* 文本颜色 */
  --text-color: var(--text-primary);
  --text-color-light: var(--text-secondary);
  --text-color-lighter: var(--text-tertiary);
  
  /* 背景颜色 */
  --background-color: var(--bg-secondary);
  --card-background: var(--bg-card);
  --hover-color: var(--color-primary-light);
  
  /* 边框颜色 */
  --border-color: var(--border-light);
  
  /* 次要颜色 */
  --secondary-color: var(--text-secondary);
  
  /* 阴影 */
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
}

[data-theme="dark"] {
  /* 暗色主题变量 */
  --primary-color: #64b5f6;
  --primary-color-dark: #42a5f5;
  --primary-color-light: rgba(100, 181, 246, 0.1);
  --text-color: #e1e4e8;
  --text-color-light: #b0b0b0;
  --text-color-lighter: #808080;
  --background-color: #1a1a1a;
  --card-background: #2d2d2d;
  --hover-color: rgba(100, 181, 246, 0.05);
  --border-color: #404040;
  --secondary-color: #b0b0b0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
}

/* 全局样式 */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.card {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin: 8px 0;
}

code {
  background-color: var(--code-background);
  padding: 2px 4px;
  border-radius: 4px;
}

/* 代码块样式 */
.code-block {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.2rem;
    margin: 1rem 0;
    font-family: 'Fira Code', monospace;
}

.hljs-keyword { color: #d73a49; }
.hljs-string { color: #032f62; }